//	翻转角度

import React, { useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { Radio, Switch } from 'antd';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const UploadImage = ( props: IProps ) => {
	const { config, onValuesChange } = props;
	const [ imageRotate, setImageRotate ] = useState( config.mutual.imageRotate || '0' );
	const [ isKeepRatio, setKeepRatio ] = useState( config.mutual.isKeepRatio || false );

	const handleRadio = ( event ) => {
		onValuesChange( config.type, config.key, {
			imageRotate: event.target.value
		}, 'mutual' );
		setImageRotate( event.target.value );
	};

	const handleSwitchChange = ( value ) => {
		onValuesChange( config.type, config.key, {
			isKeepRatio: value
		}, 'mutual' );
		setKeepRatio( value );
	};
	return (

		<div>
			<FormItem
				labelAlign="left" labelCol={ { span: 24 } }
				wrapperCol={ { span: 16 } }>
				<Radio.Group
					value={ imageRotate } defaultValue={ imageRotate } onChange={ handleRadio }
					style={ { display: 'flex', flexDirection: 'column' } }>
					<Radio value="0">0度</Radio>
					<Radio value="90">90度</Radio>
					<Radio value="180">180度</Radio>
					<Radio value="270">270度</Radio>
				</Radio.Group>
			</FormItem>
			<FormItem
				label='保持图片比例'
				labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 16 } }>
				<Switch checked={ isKeepRatio } onChange={ handleSwitchChange }></Switch>
			</FormItem>
		</div>
	);
};


export default React.memo( UploadImage );
